<!-- Feedback.vue -->
<template>
  <div class="feedback-management">
    <div class="card">
      <div class="card-header">
        <h2>反馈与帮助</h2>
      </div>

      <div class="tabs">
        <div class="tab-header">
          <button
              :class="['tab-button', { active: activeTab === 'submit' }]"
              @click="activeTab = 'submit'"
          >
            提交反馈
          </button>
          <button
              :class="['tab-button', { active: activeTab === 'history' }]"
              @click="activeTab = 'history'"
          >
            我的反馈
          </button>
        </div>

        <div class="tab-content">
          <div v-if="activeTab === 'submit'" class="submit-feedback">
            <div class="form-group">
              <label>反馈类型</label>
              <select v-model="feedback.type">
                <option value="">请选择反馈类型</option>
                <option
                    v-for="type in feedbackTypes"
                    :key="type.value"
                    :value="type.value"
                >
                  {{ type.label }}
                </option>
              </select>
            </div>

            <div class="form-group">
              <label>反馈内容</label>
              <textarea
                  v-model="feedback.content"
                  placeholder="请详细描述您的问题或建议"
              ></textarea>
            </div>

            <div class="form-actions">
              <button class="btn-submit" @click="submitFeedback">提交</button>
              <button class="btn-reset" @click="resetForm">重置</button>
            </div>
          </div>

          <div v-if="activeTab === 'history'" class="feedback-history">
            <div class="table-container">
              <table>
                <thead>
                <tr>
                  <th>类型</th>
                  <th>内容</th>
                  <th>提交时间</th>
                  <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in feedbackHistory" :key="item.id">
                  <td>{{ formatType(item.type) }}</td>
                  <td>{{ item.content }}</td>
                  <td>{{ $formatDate(item.createTime) }}</td>
                  <td>
                      <span class="status-tag" :class="item.status">
                        {{ formatStatus(item.status) }}
                      </span>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Feedback',
  data() {
    return {
      activeTab: 'submit',
      feedback: {
        type: '',
        content: '',
        contact: ''
      },
      feedbackTypes: [
        { value: 'bug', label: '问题反馈' },
        { value: 'suggestion', label: '功能建议' },
        { value: 'complaint', label: '投诉举报' },
        { value: 'other', label: '其他' }
      ],
      feedbackHistory: [],
      loading: false
    }
  },
  created() {
    this.fetchFeedbackHistory();
  },
  methods: {
    async submitFeedback() {
      if (!this.feedback.type || !this.feedback.content) {
        this.$message.warning('请填写反馈类型和内容');
        return;
      }

      const uid = localStorage.getItem('uid');
      const payload = {
        ...this.feedback,
        uid
      };

      try {
        await this.$http.post('/percenter/feedback', payload);
        this.$message.success('反馈提交成功');
        this.resetForm();
        this.fetchFeedbackHistory();
        this.activeTab = 'history';
      } catch (error) {
        this.$message.error('提交失败');
      }
    },
    formatType(type) {
      const types = {
        'bug': '问题反馈',
        'suggestion': '功能建议',
        'complaint': '投诉举报',
        'other': '其他'
      };
      return types[type] || type;
    },
    formatStatus(status) {
      const statusMap = {
        'pending': '处理中',
        'processed': '已处理',
        'rejected': '已拒绝'
      };
      return statusMap[status] || status;
    },
    // submitFeedback1() {
    //   if (!this.feedback.type) {
    //     this.$message.warning('请选择反馈类型');
    //     return;
    //   }
    //   if (!this.feedback.content) {
    //     this.$message.warning('请输入反馈内容');
    //     return;
    //   }
    //
    //   // 提交反馈逻辑
    //   this.$message.success('反馈提交成功');
    //   this.resetForm();
    //   this.fetchFeedbackHistory();
    //   this.activeTab = 'history';
    // },
    resetForm() {
      this.feedback = {
        type: '',
        content: '',
        contact: ''
      };
    }
  }
}
</script>

<style scoped>
.feedback-management {
  padding: 20px;
}

.tabs {
  margin-top: 20px;
}

.tab-header {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  color: #607d8b;
}

.tab-button.active {
  color: #1976d2;
  font-weight: 500;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1976d2;
}

.tab-content {
  padding: 20px 0;
}

.submit-feedback {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #607d8b;
  font-weight: 500;
}

.form-group select,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.form-group textarea {
  height: 150px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-submit {
  padding: 10px 20px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-reset {
  padding: 10px 20px;
  background-color: #f5f5f5;
  color: #607d8b;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.status-tag.pending {
  background-color: #ff9800;
}

.status-tag.processed {
  background-color: #4caf50;
}

.status-tag.rejected {
  background-color: #f44336;
}
</style>